<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>十六进制颜色更迭</title>
    <style>
        body {
            background-color: blueviolet;
        }

        div {
            width: 532px;
            height: 200px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 0 auto;
        }

        h3 {
            padding-right: 20px;
            color: pink;
            font-size: 24px;

        }

        span {
            color:white;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3 id="time">学习js从入门到放弃 : </h3>
        <p class="time">
            <span id="timeb">❥</span>
            <span id="timec">❥</span>
            <span id="timed">❥</span>
            <span id="timee">❥</span>
        </p>
    </div>
</body>

<script>
    // 需求：找出x~y之间的随机整数
    // 封装函数
    // 1. 准备一个函数, 接收两个参数
    function fn(x, y) {
        // 2. 计算出两个数字之间的随机数
        // 2-1. 先要确定 x 和 y 相对大的和相对小的数字
        var max = Math.max(x, y)
        var min = Math.min(x, y)

        // 2-2. 利用这个大数字和小数字取出随机整数
        var n = Math.floor(Math.random() * (max - min + 1) + min)

        // 3. 把这个随机数字返回
        return n
    }

    // 使用的时候
    // res 得到的就是 10 ~ 20 之间的一个随机整数
    //   var res = fn(30, 20)
    //   console.log(res)


    setInterval(() => {

        function timeDiff(time1, time2) {
            // 两个形参time1,time2表示两个时间节点
            // 计算两个时间节点之间的差值（天，小时，分钟，秒钟）
            // 首先计算两个时间节点间相差的秒数
            var diff = Math.floor(Math.abs(time1.getTime() - time2.getTime()) / 1000)
            // 通过diff换算计算两个时间节点之间的差值（天，小时，分钟，秒钟）
            var day = Math.floor(diff / (60 * 60 * 24))
            var hours = Math.floor(diff % (60 * 60 * 24) / (60 * 60))
            var minutes = Math.floor(diff % (60 * 60) / 60)
            var seconds = diff % 60

            // 返回一个对象，里面包含所有的信息
            var obj = {}
            // 向对象里面添加成员
            obj.day = day
            // 把day变量的值赋值给了obj的day成员
            // 以此类推
            obj.hours = hours
            obj.minutes = minutes
            obj.seconds = seconds
            return obj
        }
        // var time1 = new Date("2020-5-24 16:50:33")
        // var time2 = new Date("1998-12-07 9:55:00")
        // var res =timeDiff(time1,time2)


        // 引入函数后思路：
        // 一、获取两个时间节点之间的时间差
        // 1.1准备两个时间节点
        // 二、写一个定时器setInterval()，每间隔一秒钟执行一次。
        // 每间隔一秒钟获取一次当前时间
        // 每间隔一秒钟计算一次时间差
        // 每间隔一秒钟写入页面里面一次
        // 三、把得到的时间差写入页面里面
        // 组装出一个html格式的字符串
        // <span>一天</span>
        // <span>一小时</span>
        // <span>一分钟</span>
        // <span>一秒钟</span>
        // 获取页面中现在存在的p标签
        // 然后把我组装好的字符串使用innerHTML属性写入到P标签内

        // var time1 = new Date("2020-05-23 16:50:33")
        // var time2 = new Date()
        // // 获取时间差
        // var res = timeDiff(time1, time2)
        // console.log(res)
        // 获取p标签
        var time1 = new Date("2018-02-14 16:50:33")
        var p = document.querySelector('p')
        var time2 = new Date()
        var res = timeDiff(time1, time2)
        // console.log(res)
        // 写入页面
        // 每间隔一秒都要组装一次最新的字符串
        var str = "<span>" + res.day + '天</span><span>' + res.hours + "小时</span><span>" + res.minutes +
            '分钟</span><span>' + res.seconds + "秒</span>"
        // 获取p元素，因为不需要每间隔一秒都获取一次
        // 所以这个代码写在定时器外面
        // 因为每间隔一秒都要覆盖式的写入一次
        // 所以要在这里把我们准备好的str写入p标签内容里面
        p.innerHTML = str

        var str = "0123456789abcdef"
        var color = "#"
        for (var i = 1; i <= 6; i++) {
            color = color + str[fn(0, 15)]
        }
        document.body.style.background = color
        var color1 = "#"
        for (var k = 1; k <= 6; k++) {
            color1 = color1 + str[fn(0, 15)]
        }
      
        time.style.color = color1
        var color2 = "#"
        for (var k = 1; k <= 6; k++) {
            color2 = color2 + str[fn(0, 15)]
        }
        var t1=document.querySelectorAll("span")
        console.log(t1)
        t1[0].style.color = color2
        var color3 = "#"
        for (var l = 1; l <= 6; l++) {
            color3 = color3 + str[fn(0, 15)]
        }
        t1[1].style.color = color3
        var color4 = "#"
        for (var m = 1; m <= 6; m++) {
            color4 = color4 + str[fn(0, 15)]
        }
        t1[2].style.color = color4
        var color5 = "#"
        for (var n = 1; n <= 6; n++) {
            color5 = color5 + str[fn(0, 15)]
        }
        t1[3].style.color = color5
    }, 100);
</script>

</html>